<template>
  <div class="customer-list-create">
    <div class="container">
      <createTop firstMenu="订单管理" secondMenu="客户列表" :title="pageName"></createTop>
      <el-card shadow="always" v-loading="loading">
        <div class="content">
          <div class="se">
            <div class="content-title">名称 <span class="red-icon">※</span></div>
            <el-input :style="{'width':'350px'}" v-model="nickname" placeholder="请输入名称"></el-input>
          </div>

          <div class="s">
            <div class="content-title">编码</div>
            <el-input :style="{'width':'350px'}" disabled align="left" v-model="number" placeholder="请输入编号"></el-input>
          </div>
        </div>

        <div class="content">
          <div class="se">
            <div class="content-title">区域</div>
            <el-input :style="{'width':'350px'}" v-model="area" :rows="5" resize="none" placeholder="请输入区域"></el-input>
          </div>
          <div class="se">
            <div class="content-title">详细地址</div>
            <el-input :style="{'width':'350px'}" v-model="address" :rows="5" resize="none" placeholder="请输入详细地址"></el-input>
          </div>
        </div>
      </el-card>

      <el-card shadow="always" v-loading="loading">
        <div class="content">
          <div class="se">
            <div class="content-title">姓名 <span class="red-icon">※</span></div>
            <el-input :style="{'width':'350px'}" v-model="name" placeholder="请输入姓名"></el-input>
          </div>

          <div class="se">
            <div class="content-title">手机</div>
            <el-input :style="{'width':'350px'}" align="left" v-model="tel" placeholder="请输入手机"></el-input>
          </div>
        </div>

        <div class="content">
          <div class="se">
            <div class="content-title">电话</div>
            <el-input :style="{'width':'350px'}" v-model="telephone" placeholder="请输入电话"></el-input>
          </div>

          <div class="se">
            <div class="content-title">传真</div>
            <el-input :style="{'width':'350px'}" align="left" v-model="fax" placeholder="请输入传真"></el-input>
          </div>
        </div>


        <div class="content">
          <div class="se">
            <div class="content-title">职位</div>
            <el-input :style="{'width':'350px'}" v-model="job" :rows="5" resize="none" placeholder="请输入职位"></el-input>
          </div>

          <div class="se">
            <div class="content-title">Email</div>
            <el-input :style="{'width':'350px'}" v-model="email" :rows="5" resize="none" placeholder="请输入Email"></el-input>
          </div>
        </div>
      </el-card>
      
      <el-card shadow="always" v-loading="loading">
        <div slot="header" class="card-title">
          财务信息
        </div>
        <div class="content">
          <div class="se">
            <div class="content-title">开户名称</div>
            <el-input :style="{'width':'350px'}" v-model="account_name" placeholder="请输入名称"></el-input>
          </div>
          <div class="se">
            <div class="content-title">开户银行</div>
            <el-input :style="{'width':'350px'}" align="left" v-model="bank" placeholder="请输入银行"></el-input>
          </div>
        </div>

        <div class="content">
          <div class="se">
            <div class="content-title">银行账号</div>
            <el-input :style="{'width':'350px'}" v-model="account" :rows="5" resize="none" placeholder="请输入账号"></el-input>
          </div>

          <div class="se">
            <div class="content-title">发票抬头</div>
            <el-input :style="{'width':'350px'}" v-model="invoice" :rows="5" resize="none" placeholder="请输入发票抬头"></el-input>
          </div>
        </div>

        <div class="content">
          <div class="se">
            <div class="content-title">发票内容</div>
            <el-input :style="{'width':'350px'}" v-model="invoice_content  " :rows="5" resize="none" placeholder="请输入发票内容"></el-input>
          </div>

          <div class="se">

            <div class="content-title">纳税人识别号</div>
            <el-input :style="{'width':'350px'}" v-model="taxpayer_number  " :rows="5" resize="none" placeholder="请输入纳税人识别号"></el-input>
          </div>
        </div>

        <div class="content">
          <div class="se">
            <div class="content-title">发票地址</div>
            <el-input :style="{'width':'350px'}" v-model="invoice_address  " :rows="5" resize="none" placeholder="请输入地址"></el-input>
          </div>
        </div>
      </el-card>
      <el-card>
        <div slot="header" class="card-title">
          其他信息
        </div>
        <div class="content">
          <div class="se">
            <div class="content-title">备注 </div>
            <el-input :style="{'width':'350px'}" v-model="remark" type="textarea" :rows="5" resize="none" placeholder="输入适当的备注方便管理"></el-input>
          </div>
        </div>
      </el-card>

      <saveBtn @confirm="confirm"></saveBtn>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';

@Component({
  components: {
    createTop,
    saveBtn
  }
})
export default class CustomerListCreate extends Vue {
  pageName: string = '';
  secondMenu: string = '';
  createRes!: ajaxResquest;
  infoRes!: ajaxResquest;
  // 客户名称
  nickname: string = '';
  number: string = '';
  // 区域
  area: string = '';
  address: string = '';
  // 人
  name: string = '';
  tel: string = '';
  job: string = '';
  email: string = '';
  telephone: string = '';
  fax: string = '';
  // 财务
  account_name: string = '';
  bank: string = '';
  account: string = '';
  invoice: string = '';
  // 发票内容
  invoice_content: string = '';
  // 纳税人编号
  taxpayer_number: string = '';
  invoice_address: string = '';

  remark: string = '';
  loading: boolean = false;
  id!: string;
  mounted() {
    if (this.$route.query.edit) {
      this.pageName = '编辑客户';
      this.id = this.$route.query.id;
      this.infoRes = new ajaxResquest('/order/getCustomersInfo');
      this.getInfo();
    } else {
      this.pageName = '新增客户';
    }
    this.createRes = new ajaxResquest('/order/customersToDo');
  }
  getInfo() {
    this.infoRes.getFunction({ id: this.id }).then((res: any) => {
      if (res.data.code === 1) {
        console.log(res.data.data.types.info[0].fax);
        let temp = res.data.data.types.info[0];
        this.nickname = temp.nickname;
        this.area = temp.area ? temp.area : '';
        this.address = temp.address ? temp.address : '';
        this.name = temp.name;
        this.tel = temp.tel ? temp.tel : '';
        this.telephone = temp.telephone ? temp.telephone : '';
        this.fax = temp.fax ? temp.fax : '';
        this.job = temp.job ? temp.job : '';
        this.email = temp.email ? temp.email : '';
        this.account_name = temp.account_name ? temp.account_name : '';
        this.bank = temp.bank ? temp.bank : '';
        this.account = temp.account ? temp.account : '';
        this.invoice = temp.invoice ? temp.invoice : '';
        this.invoice_content = temp.invoice_content ? temp.invoice_content : '';
        this.taxpayer_number = temp.taxpayer_number ? temp.taxpayer_number : '';
        this.invoice_address = temp.invoice_address ? temp.invoice_address : '';
        this.remark = temp.remarks ? temp.remarks : '';
      }
    });
  }
  confirm(): void {
    let data: any = {
      nickname: this.nickname,
      area: this.area,
      address: this.address,
      name: this.name,
      tel: this.tel,
      telephone: this.telephone,
      fax: this.fax,
      job: this.job,
      email: this.email,
      account_name: this.account_name,
      bank: this.bank,
      account: this.account,
      invoice: this.invoice,
      invoice_content: this.invoice_content,
      taxpayer_number: this.taxpayer_number,
      invoice_address: this.invoice_address,
      remarks: this.remark
    };
    if (this.$route.query.id) {
      data = { ...data, id: this.$route.query.id };
    }
    this.createRes.getFunction(data).then((res: any) => {
      if (res.data.code === 1) {
        this.$to('customerList');
      }
    });
  }
}
</script>
<style lang="less">
.customer-list-create {
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  z-index: 101;
  box-sizing: border-box;
  overflow: auto;

  .el-card {
    overflow-y: auto;
    margin-bottom: 20px;
  }
  .content {
    font-size: 16px;
    background-color: #fff;
    border-radius: 4px;
    .content-title {
      height: 30px;
      margin-top: 10px;
      line-height: 2;
      text-align: left;
    }
    .short-input {
      width: 100%;
      width: 240px;
      margin-right: 10px;
    }
    .el-upload-list__item {
      width: 350px;
    }
    .el-textarea {
      margin-bottom: 30px;
    }
  }
  .checkbox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .el-checkbox {
    margin: 2px 0 !important;
    width: 130px;
  }
  .confirm {
    margin-top: 0;
  }
  .card-title {
    text-align: left;
    font-weight: 600;
  }
}
</style>
